
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Machine Multi-Purpose HTML Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/pe-icon-7-stroke.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/flexslider.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/theme-ketchup.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/custom.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="http://fonts.googleapis.com/css?family=Roboto:100,400,300,700,400italic,500%7CMontserrat:400,700" rel="stylesheet" type="text/css">
    </head>
    <body>	
		<div class="nav-container">
			<nav class="nav-2">
				<div class="container">
					<div class="row">
						<div class="col-sm-12">
							<a href="index.html">
								<img alt="logo" class="logo" src="img/logo-square-light.png">
							</a>
							<div class="text-right">
								<ul class="social-links">
									<li><a href="#"><i class="ti ti-twitter-alt"></i></a></li>
									<li><a href="#"><i class="icon ti ti-vimeo-alt"></i></a></li>
									<li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
								</ul>
								<div class="menu-toggle">
									<div class="bar-1"></div>
									<div class="bar-2"></div>
									<div class="bar-3"></div>
								</div>
						
								<ul class="menu">
									<li><a href="#home" class="inner-link" target="default">home</a></li><li><a href="#features" class="inner-link" target="default">features</a></li><li><a href="#subscribe" class="inner-link" target="default">subscribe</a></li><li><a href="#pricing" class="inner-link" target="default">pricing</a></li><li><a href="#faq" class="inner-link" target="default">FAQ</a></li>
								</ul>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			</nav>
		</div>
		
		<div class="main-container">
		<a id="home" class="in-page-link"></a>
			
			<section class="hero-slider large-image fixed-header">
				<ul class="slides">
					<li>
						<div class="background-image-holder">
							<img alt="Slide Background" class="background-image" src="img/hero11.jpg">
						</div>
					
						<div class="video-holder gradient-overlay video-wrapper">
							<video autoplay="" muted="" loop="">
							  <source src="video/video.webm" type="video/webm">
							  <source src="video/video.mp4" type="video/mp4">
							  <source src="video/video.ogv" type="video/ogg">
							</video>
						</div>	
			
						<div class="container vertical-align">
							<div class="row">
								<div class="col-sm-12 text-center">
									<h1 class="text-white">Build cool sites, really fast.</h1>
								</div>
							</div>
						</div><!--end of container-->	
					</li>
				
				</ul>
			</section>
			
			<section class="device-divider-1">
				<div class="background-image-holder">
					<img alt="Slide Background" class="background-image" src="img/grey-bg.jpg">
				</div>
			
				<div class="container">
					<div class="row">
						<div class="col-sm-6 vertical-align col-sm-push-6">
								<h2>Our latest app is straight rockin'</h2>
								<p>
									Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. asperiores repellat.
								</p>
								<a class="text-link" href="#">More Features <i class="icon ti ti-arrow-right arrow_right"></i></a>
								<a class="text-link" href="#">Purchase Now <i class="icon ti ti-arrow-right arrow_right"></i></a>
						</div>
					
						<div class="col-sm-6 col-sm-pull-6">
							<img alt="Device Image" src="img/phone.png">
						</div>
					
					</div><!--end of row-->
				</div><!--end of container-->
			
			</section>
			
			<a id="features" class="in-page-link"></a>
			
			<section class="feature-lists large-pad">
				<div class="container">
				
					<div class="row">
						<div class="col-md-4 col-sm-6">
							<div class="feature-list text-center">
								<i class="icon icon-large pe-7s-user"></i>
								<h5>We employ our unique methodology to ensure your campaign is successful</h5>
								<p>
									Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
								</p>
							</div>
						</div>
						
						<div class="col-md-4 col-sm-6">
							<div class="feature-list text-center">
								<i class="icon icon-large pe-7s-compass"></i>
								<h5>Our solutions are built from the ground-up to address your project requirements</h5>
								<p>
									Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
								</p>
							</div>
						</div>
						
						<div class="col-md-4 col-sm-6">
							<div class="feature-list text-center">
								<i class="icon icon-large pe-7s-help2"></i>
								<h5>Your final product will be tailor made and well supported by our friendly team</h5>
								<p>
									Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
								</p>
							</div>
						</div>
		
					</div><!--end of row-->
				</div><!--end of container-->
			</section>
			
			<a id="subscribe" class="in-page-link"></a>
			
			<section class="no-pad signup-divider short">
				<div class="background-image-holder overlay">
					<img alt="Slide Background" class="background-image" src="img/hero16.jpg">
				</div>
			
				<div class="container">
					<div class="row">
						<div class="col-sm-10 col-sm-offset-1 text-center">
							
							<h2 class="text-white">Get the skinny on our amazing new product<br> the moment it launches.</h2>
							<p class="text-white lead">Be the first to know about the launch of our fantastic new product.</p>
							<form class="form-newsletter" data-success="Thanks, we'll be in touch shortly." data-error="Please enter a valid email address">
								<input type="text" class="input-transparent validate-required validate-email signup-email-field" placeholder="Email Address Here" name="email">
								<input type="submit" class="btn btn-filled" value="Notify Me">
								<!--<iframe class="mail-list-form" srcdoc="&lt;!&ndash; Begin MailChimp Signup Form &ndash;&gt; <link href=&quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <style type=&quot;text/css&quot;> 	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } 	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block. 	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <div id=&quot;mc_embed_signup&quot;> <form action=&quot;//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;amp;id=d4b3d090a4&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate>     <div id=&quot;mc_embed_signup_scroll&quot;> 	<h2>Subscribe to our mailing list</h2> <div class=&quot;indicates-required&quot;><span class=&quot;asterisk&quot;>*</span> indicates required</div> <div class=&quot;mc-field-group&quot;> 	<label for=&quot;mce-EMAIL&quot;>Email Address  <span class=&quot;asterisk&quot;>*</span> </label> 	<input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email&quot; id=&quot;mce-EMAIL&quot;> </div> <div class=&quot;mc-field-group&quot;> 	<label for=&quot;mce-FNAME&quot;>First Name </label> 	<input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;&quot; id=&quot;mce-FNAME&quot;> </div> <div class=&quot;mc-field-group&quot;> 	<label for=&quot;mce-LNAME&quot;>Last Name </label> 	<input type=&quot;text&quot; value=&quot;&quot; name=&quot;LNAME&quot; class=&quot;&quot; id=&quot;mce-LNAME&quot;> </div> 	<div id=&quot;mce-responses&quot; class=&quot;clear&quot;> 		<div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;></div> 		<div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;></div> 	</div>    &lt;!&ndash; real people should not fill this in and expect good things - do not remove this or risk form bot signups&ndash;&gt;     <div style=&quot;position: absolute; left: -5000px;&quot;><input type=&quot;text&quot; name=&quot;b_77142ece814d3cff52058a51f_d4b3d090a4&quot; tabindex=&quot;-1&quot; value=&quot;&quot;></div>     <div class=&quot;clear&quot;><input type=&quot;submit&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;></div>     </div> </form> </div> <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script> &lt;!&ndash;End mc_embed_signup&ndash;&gt;">-->
								<!--</iframe>-->
							</form>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
				
				
			</section>
			
			<section class="image-block">
				<div class="container">
					<div class="row">
						<div class="col-md-5 col-sm-7">
							<div class="text-block">
								<h2>Embed media at the click of a button with Variant</h2>
								<p>
									Atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.	
								</p>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			
				<div class="image-holder embed-holder col-md-6 col-sm-4 pull-right">
					<iframe src="http://player.vimeo.com/video/112208320?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
				</div>
			</section>
			
			<a id="pricing" class="in-page-link"></a>
			
			<section>
				<div class="container">
					<div class="row">
						<div class="col-xs-12">
							<div class="text-block">
								<div class="detail-line"></div>
								<h5>Pricing Options</h5>
								<h4>Select the plan that best suits your needs</h4>
							</div>
						</div>
					</div><!--end of row-->
				
					<div class="row">
						<div class="col-xs-12 pricing-tables-2">
							<div class="col-sm-4">
								<div class="pricing-table-2">
									<h2 class="uppercase">Basic Plan</h2>
									<ul>
										<li>20GB Storage</li>
										<li>Unlimited Updates</li>
										<li>Premium Support</li>
										<li>20 Unique Logins</li>
									</ul>
									<span class="price">$99</span>
									<div class="action">
										<a href="#">
											<span class="alt-font uppercase">Subscribe Now</span>
										</a>
									</div>
								</div>
							</div><!--end of individual pricing table-->
						
							<div class="col-sm-4">
								<div class="pricing-table-2">
									<h2 class="uppercase">Value Plan</h2>
									<ul>
										<li>50GB Storage</li>
										<li>Unlimited Updates</li>
										<li>Premium Support</li>
										<li>80 Unique Logins</li>
									</ul>
									<span class="price">$149</span>
									<div class="action">
										<a href="#">
											<span class="alt-font uppercase">Subscribe Now</span>
										</a>
									</div>
								</div>
							</div><!--end of individual pricing table-->
						
							<div class="col-sm-4">
								<div class="pricing-table-2">
									<h2 class="uppercase">Heavy Plan</h2>
									<ul>
										<li>100GB Storage</li>
										<li>Unlimited Updates</li>
										<li>Premium Support</li>
										<li>100 Unique Logins</li>
									</ul>
									<span class="price">$239</span>
									<div class="action">
										<a href="#">
											<span class="alt-font uppercase">Subscribe Now</span>
										</a>
									</div>
								</div>
							</div><!--end of individual pricing table-->
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			</section>
			
			<section class="clients-1">
				<div class="container">
					<div class="row">
						<div class="col-sm-12 text-center">
							<div class="text-block">
								<p class="super-lead text-white">A few of the many valued clients we've had the pleasure to work with.</p>
							</div>
						</div>
					</div><!--end of row-->
				
					<div class="row">
						<div class="col-md-3 col-sm-6 text-center">
							<img alt="Client" src="img/c1.png">
						</div>
					
						<div class="col-md-3 col-sm-6 text-center">
							<img alt="Client" src="img/c2.png">
						</div>
					
						<div class="col-md-3 col-sm-6 text-center">
							<img alt="Client" src="img/c3.png">
						</div>
					
						<div class="col-md-3 col-sm-6 text-center">
							<img alt="Client" src="img/c4.png">
						</div>
					
					</div><!--end of row-->
				</div><!--end of container-->
			</section>			
			<section class="promo-1">
				<div class="promo-image-holder">
					<div class="background-image-holder">
						<img alt="Slide Background" class="background-image" src="img/hero28.jpg">
					</div>
				</div>
			
				<div class="container">
					<div class="row">
						<div class="col-md-10 col-md-offset-1">
							<div class="col-sm-7 left-content">
								<div class="vertical-align">
									<h4>Build a clean, sophisticated website<br> in a matter of minutes.</h4>
									<p class="lead">
										Nam libero tempore, cum soluta nobis est eligendi optio<br> cumque nihil impedit quo minus id quod maxime .
									</p>
								</div>
							</div>
						
							<div class="col-sm-5 right-content">
								<div class="vertical-align">
									<span class="text-white title">Questions or queries?</span>
									<span class="sub">Get in touch immediately then man</span>
									<a class="btn btn-white" href="#">Start The Convo</a>
								</div>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			</section>
			
			<a id="faq" class="in-page-link"></a>
			
			<section class="info-panels">
				<div class="container">
					<div class="row">
						<div class="col-sm-4">
							<div class="info-panel-slim">
								<h4>What if I find a bug?</h4>
								<p class="lead">Never mind, we can always patch in an update. We are currently looking for backers that can make a significant pledge.</p>
								<a class="text-link" href="#">bugs@machine.net <i class="icon ti ti-arrow-right arrow_right"></i></a>
							</div>
						</div>
					
						<div class="col-sm-4">
							<div class="info-panel-slim">
								<h4>Which OS will it support?</h4>
								<p class="lead">At launch we will support iOS, Android and Windows Mobile with plans to support Blackberry OS. Shoot us a message!</p>
								<a class="text-link" href="#">hello@machine.net <i class="icon ti ti-arrow-right arrow_right"></i></a>
							</div>
						</div>
					
						<div class="col-sm-4">
							<div class="info-panel-slim">
								<h4>Will my data be safe?</h4>
								<p class="lead">Of course, we have no interest in selling your data off or using it for evil. You can download a summary of your data at anytime.<br><br> We use the Amazon CDN for online storage.</p>
								
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			</section>
			<footer class="footer-2">
				<div class="container">
					<div class="row">
						<div class="col-sm-6">
							<a href="index.html">
								<img alt="logo" class="logo" src="img/logo-square-dark.png">
							</a>
							<span class="tagline">Machine multi-purpose<br> premium template</span>
						</div>
					
						<div class="col-sm-6 text-right">
							<ul class="social-links">
								<li><a href="#"><i class="icon ti ti-twitter-alt"></i></a></li>
								<li><a href="#"><i class="icon ti ti-facebook"></i></a></li>
								<li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
							</ul>
						</div>
					</div><!--end of row-->
				
					<div class="row">
						<div class="col-xs-12">
							<div class="footer-lower">
								<a class="text-link" href="#">hello@machine.net <i class="icon ti ti-arrow-right arrow_right"></i></a>
								<span class="copyright">© Copyright 2014 Medium Rare</span>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			</footer>
		</div>
		
				
		<script src="js/jquery.min.js"></script>


        <script src="js/bootstrap.min.js"></script>
        <script src="js/skrollr.min.js"></script>
        <script src="js/flexslider.min.js"></script>
        <script src="js/lightbox.min.js"></script>
        <script src="js/twitterfetcher.min.js"></script>
        <script src="js/spectragram.min.js"></script>
        <script src="js/smooth-scroll.min.js"></script>
        <script src="js/jquery.plugin.min.js"></script>
        <script src="js/placeholders.min.js"></script>
        <script src="js/countdown.min.js"></script>
    	<script src="js/scripts.js"></script>
    </body>
</html>

				